<!--  -->
<template>
  <div class="car_details">
    <SearchBar></SearchBar>
    <!-- 车辆图片展示 -->
    <div class="car_image">
      <el-carousel height="70vh" direction="vertical" :autoplay="false">
        <el-carousel-item v-for="(item, index) in carImg" :key="index">
          <el-image
            style="height: 100%; width: 100%; cursor: pointer"
            :src="item.url"
          >
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 车型详情列表展示 -->
    <div class="car_list">
      <div class="left_info">
        <div class="info_title">{{ tableData[0].carName }}·车型列表</div>
        <el-divider style="margin: 14px"></el-divider>
        <el-row :gutter="1">
          <el-descriptions
            class="margin-top"
            v-for="(item, index) in tableData"
            :key="index"
            :title="item.styleName"
            :column="3"
            :border="true"
          >
            <template slot="extra">
              <el-button type="primary" size="small">操作</el-button>
            </template>
            <el-descriptions-item>
              <template slot="label"> 价格 </template>
              {{ item.price == null ? "- - - -" : item.price }}万
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 车辆分类 </template>
              {{ item.type == null ? "- - - -" : item.type }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 厂商 </template>
              {{ item.factory == null ? "- - - -" : item.factory }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 级别 </template>
              {{ item.level == null ? "- - - -" : item.level }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 能源类型 </template>
              {{ item.energyType == null ? "- - - -" : item.energyType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 上市时间 </template>
              {{
                item.saleTime == null ? "- - - -" : item.saleTime.slice(0, 10)
              }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 发动机 </template>
              {{ item.engine == null ? "- - - -" : item.engine }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大功率 </template>
              {{ item.maxPower == null ? "- - - -" : item.maxPower }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 最大扭矩 </template>
              {{ item.maxTorque == null ? "- - - -" : `${item.maxTorque}N·m` }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 变速箱 </template>
              {{ item.gearbox == null ? "- - - -" : item.gearbox }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 车身结构 </template>
              {{ item.structure == null ? "- - - -" : item.structure }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 百公里油耗 </template>
              {{
                item.oilConsume == null
                  ? "- - - -"
                  : `${item.oilConsume}L/百公里`
              }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
      </div>

      <div class="right_info">
        <div class="title">同级车对比</div>
        <div
          class="car_container"
          v-for="(item, index) in comparedata"
          :key="index"
        >
          <img :src="item.url" @click="getSameCar(item.urlId)" />
          <div class="info">
            <div class="carname" @click="getSameCar(item.urlId)">
              {{ item.carName }}
            </div>
            <div class="price">{{ item.price }}万</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from "@/components/querypage/SearchBar.vue";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  created() {
    // 回到顶部
    document.documentElement.scrollTop = document.body.scrollTop = 0;
    this.getCarDetails();
    this.getCompareData();
  },

  mounted() {
    this.axios
      .get("/banners/index")
      .then((res) => {
        this.carImg = res.data.data;
      })
      .catch((err) => {
        console.log(err);
      });
    document.documentElement.scrollTop = document.body.scrollTop = 0;
  },

  //import引入的组件需要注入到对象中才能使用
  components: { SearchBar },

  // 接收参数
  props: ["urlId"],

  data() {
    //这里存放数据
    return {
      carImg: null,
      comparedata: [],
      tableData: [],
    };
  },

  //监听属性 类似于data概念
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    // 获取汽车详情
    getCarDetails() {
      this.axios
        .get(`/cars/details?urlId=${this.urlId}`)
        .then((res) => {
          if (res.data.status == 20000) {
            this.tableData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 同级车对比
    getCompareData() {
      let samecar_list = [];
      this.axios
        .get(`/cars/compare-car-by-level?urlId=${this.urlId}`)
        .then((res) => {
          let m, n, t;
          samecar_list = res.data;
          t = Math.floor(Math.random() * samecar_list.length);
          switch (true) {
            case t == 0:
              (m = 0), (n = 5);
              break;
            case t > 0 && t <= 5:
              (m = 0), (n = 5);
              break;
            case t > 5:
              (n = t), (m = n - 5);
              break;
          }
          this.comparedata = samecar_list.slice(m, n);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 查看同级车信息
    getSameCar(urlId) {
      this.$router.push(`/cardetail/${urlId}`);
      this.$router.go(0);
    },
  },
};
</script>

<style lang='scss'>
//@import url(); 引入公共css类
.car_details {
  display: flex;
  justify-items: center;
  flex-direction: column;
  align-items: center;
  background-color: #34373c;
  padding: 88px 0;

  .car_image {
    height: 50vh;
    width: 92.5vw;
    background-color: #ffffff;
  }

  .car_list {
    // height: 50vh;
    width: 92.5vw;
    display: flex;
    align-items: flex-start;

    // background-color: red;
  }

  .left_info {
    width: 80%;
    background-color: #fff;
    margin-right: 14px;
    margin-top: 175px;
    border-radius: 6px;
  }

  .right_info {
    background-color: #fff;
    width: 20%;
    margin-top: 175px;
    border-radius: 6px;

    .title {
      text-align: left;
      font-size: 22px;
      margin: 5px;
      margin-bottom: 20px;
    }
  }

  //对比的按钮
  .pk_bto {
    height: 30px;
    width: 60px;
    display: flex;
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 10px;
  }

  // 列表标题px
  .info_title {
    text-align: left;
    font-size: 26px;
    color: #303133;
    margin: 20px;
    margin-left: 25px;
  }

  // 图片展示栏
  .el-carousel__item h3 {
    color: #475669;
    font-size: 24px;
    opacity: 0.75;
    line-height: 500px;
    margin: 0;
  }

  .el-descriptions__title {
    font-size: 24px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  .car_container {
    margin: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 2px #2c3e50 solid;
    border-radius: 6px;
  }
  // 右边图片
  .car_container img {
    width: 120px;
    height: 80px;
    overflow: hidden;
  }
  .car_container img:hover {
    transform: scale(1.1);
    transition: all 0.75s linear;
    cursor: pointer;
  }
  //同款汽车数据
  .info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .info .carname {
    margin-top: 20px;
    margin-left: 10px;
  }
  .info .carname:hover {
    color: #e6a23c;
    cursor: pointer;
  }
  .info .price {
    margin-bottom: 20px;
    margin-left: 10px;
    color: #e62021;
  }

  .margin-top {
    padding: 16px;
  }
}
</style>